<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <style type="text/css">
		body{
			background-image:url(../static/img/bg.jpg);
            background-repeat: no-repeat;
			background-size: cover;
            background-attachment: fixed;
		}
	</style>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Found</title>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="../static/css/my-login.css">
    <link rel="stylesheet" href="../static/css/font-awesome.css">
<!--    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>-->
<!--    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>-->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/jquery-browser.js"></script>
    <script src="js/jquery.imageView.js"></script>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=hjpHex4OdzQGBwiRpGYLmY0uHkNpKKxj"></script>
    <script type="text/javascript"
        src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
    <style type="text/css">
        .BMap_geolocationIconBackground {
            display: none;
        }

        .BMap_stdMpZoom {
            top: 50px !important
        }
        .topside{
            background:rgba(0,0,0,0.7);
            height:50px;
            width:100%;
            position:fixed;
            top:0px;
            z-index:2;
        }
        .mr30:hover .menu1{
	    display: block;
        }
        .mr20:hover .menu2{
        display: block;
        }
        .iconbox{
            width:100px;
            height:60px;
            float:right;
            text-align:center;
            line-height:50px;
            color:#fff;
            font-size:24px;
            position:relative;
            margin-top: -5px;
        }
        .badge{
            padding: 1px 2px;
            border-radius: 50%;
            background: #d00;
            position: absolute;
            top: 14px;
            left: 23px;
            font-size: 3px;
        }
        .subMenu{
            width: 110px;
            position: absolute;
            top: 54px;
            right: -20px;
            line-height: 30px;
            font-size: 16px;
            background:rgba(0,0,0,0.7);
            display: none;
            text-align: left;
            padding-left: 10px;
            border-radius: 10%;
        }
        .subMenu li{
            list-style:none;
            line-height:30px;
            font-size:14px;
        }
        .subMenu li a{
            color:white;
            text-decoration:none;
        }
        .subMenu li i{
            margin-right:10px;
            line-height:30px;
        }
        .mr30{
            margin-right:140px;
        }
        .ic2 a{
            color:white;
        }
        .container{
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div class="topside">
        <div class="iconbox ic1 mr30"><i class="fa fa-user" aria-hidden="true" style="font-size: 15px;"> User</i>
            <div class="subMenu menu1" style="padding-top: 10px">
                <ul class="sub1" style="padding-left: 5px">
                    <li><A href="{{ url_for('personal_page') }}"><i class="fa fa-credit-card"></i> User</A></li>
                    <li><A href="{{ url_for('log_out') }}"><i class="fa fa-sign-out"></i>Sign Out</A></li>
                </ul>
            </div>
        </div>
        <div class="iconbox ic2"><A href="{{ url_for('personal_page') }}"><i class="fa fa-bell" style="font-size: 15px;"> Notice</i><span
                class="badge pull-right">{{ notice_num }}</span></A></div>

        <div class="iconbox ic1 mr20"><i class="fa fa-plus" style="font-size: 15px;"> Add</i>
            <div class="subMenu menu2" style="padding-top: 10px">
                <ul class="sub2" style="padding-left: 5px">
                    <li><A href="{{ url_for('lost') }}"><i class="fa fa-plus"></i>Add Lost</A></li>
                    <li><A href="{{ url_for('found') }}"><i class="fa fa-plus"></i>Add Found</A></li>
                </ul>
            </div>
        </div>

        <div class="iconbox ic2"><A href="{{ url_for('index') }}"><i class="fa fa-home" style="font-size: 15px;">HomePage</i></A></div>
    </div>
    <div class="container">
        <form method="POST" novalidate="">
        {{ form.csrf_token }}
        <br>
        <h1>Add information of a found thing</h1>
        <br>
        <span>
            {{ form.itemType.label }}
        </span>
        {{ form.itemType }}
        <br>
        <div class="form-group">
            {{ form.itemName.label }}
            {% if form.itemName.errors %}
                {{ form.itemName(class='form-control is-invalid') }}
                {% for error in form.itemName.errors %}
                    <div class="invalid-feedback">
                        {{ error }}
                    </div>
                {% endfor %}
            {% else %}
                {{ form.itemName }}
            {% endif %}
        </div>
        <div class="form-group">
            <label for="lostDate">Lost Date</label>
            <input type="date" class="form-control" name="lostDate" id="lostDate" />
        </div>
        <div class="form-group">
            {{ form.contactPerson.label }}
            {% if form.contactPerson.errors %}
                {{ form.contactPerson(class='form-control is-invalid') }}
                {% for error in form.contactPerson.errors %}
                    <div class="invalid-feedback">
                        {{ error }}
                    </div>
                {% endfor %}
            {% else %}
                {{ form.contactPerson(value=student.name) }}
            {% endif %}
        </div>
        <div class="form-group">
            {{ form.emailAddress.label }}
            {% if form.emailAddress.errors %}
                {{ form.emailAddress(class='form-control is-invalid') }}
                {% for error in form.emailAddress.errors %}
                    <div class="invalid-feedback">
                        {{ error }}
                    </div>
                {% endfor %}
            {% else %}
                {{ form.emailAddress(value=student.emailAddress) }}
            {% endif %}
        </div>

        <div class="form-group">
            <label>Found Location (select 1 spot)</label>
            {% if form.foundLocation.errors %}
                {{ form.foundLocation(class='form-control is-invalid') }}
                {% for error in form.foundLocation.errors %}
                    <div class="invalid-feedback">
                        {{ error }}
                    </div>
                {% endfor %}
            {% else %}
                {{ form.foundLocation }}
            {% endif %}
            <br>
            <div id="imageView_container" class="container"
                style="overflow: hidden; position: relative;height: 600px;padding: 0px; margin-top:10px;width: 100%;">
                <div id="allmap" style="width: 100%; height: 100%; "></div>

            </div>

            <br>



            <script type="text/javascript">
                // 百度地图API功能
                var map = new BMap.Map("allmap", {
                    minZoom: 17.4,
                    maxZoom: 20,
                    enableMapClick: false
                }); // 创建Map实例
                map.centerAndZoom(new BMap.Point(121.220598, 31.293589), 18); // 初始化地图,设置中心点坐标和地图级别
                // 添加地图类型控件
                map.addControl(new BMap.NavigationControl({
                    // 靠左上角位置
                    anchor: BMAP_ANCHOR_TOP_LEFT,
                    // LARGE类型
                    type: BMAP_NAVIGATION_CONTROL_SMALL,
                    // 启用显示定位
                    enableGeolocation: true
                }));
                map.enableScrollWheelZoom(true);
                // 地图上显示点的数量
                var count = []
                // 创建地址解析器
                var geoc = new BMap.Geocoder();
                // 地图点击事件
                map.addEventListener('click', function (e) {
                    if (count.length >= 1) {
                        alert("您最多能添加一个点！");
                        return
                    }
                    var pt = e.point;
                    // 添加点
                    var marker = new BMap.Marker(new BMap.Point(pt.lng, pt.lat));
                    map.addOverlay(marker);
                    var single = []
                    //根据点获取地址
                    geoc.getLocation(pt, function (rs) {
                        console.log("---------")
                        if (rs.surroundingPois.length > 0) {
                            console.log("---2111------")
                            if (rs.surroundingPois.length >= 2) {
                                single.push(rs.surroundingPois[1].title)
                                single.push(rs.surroundingPois[1].point.lng)
                                single.push(rs.surroundingPois[1].point.lat)
                                count.push(single.join("-"))
                                // count.push(rs.surroundingPois[1].point.lng)
                                // count.push(rs.surroundingPois[1].point.lat)
                                console.log(count.join(","))
                                $("#foundLocation").val(count.join(","))
                                return
                            }
                            single.push(rs.surroundingPois[0].title)
                            single.push(rs.surroundingPois[1].point.lng)
                            single.push(rs.surroundingPois[1].point.lat)
                            count.push(single.join("-"))
                            console.log(count.join(","))
                            $("#foundLocation").val(count.join(","))
                        }
                    })
                });


                extend()
                // 显示地图显示范围
                function extend() {
                    var extent = new Object();
                    extent.minX = "121.210";
                    extent.maxX = "121.230";
                    extent.minY = "31.28";
                    extent.maxY = "31.302";     // 改拖动范围
                    map.addEventListener("dragging", function (type, target) {
                        console.log("1", type, target)
                        if (Number(extent.minY) > map.getBounds().getSouthWest().lat) {
                            map.centerAndZoom(new BMap.Point(121.220598, 31.293589), 18);
                        };
                        console.log("2", Number(extent.maxY), map.getBounds().getNorthEast().lat)
                        if (Number(extent.maxY) < map.getBounds().getNorthEast().lat) {

                            map.centerAndZoom(new BMap.Point(121.220598, 31.293589), 18);
                        }
                        console.log("3", Number(type.point.lng), extent.minX)
                        if (type.point.lng <= extent.minX) {
                            map.centerAndZoom(new BMap.Point(121.220598, 31.293589), 18);
                        }
                        console.log("4", Number(type.point.lng), Number(extent.maxX), map.getBounds()
                            .getNorthEast().lat)
                        if (type.point.lng > Number(extent.maxX)) {
                            map.centerAndZoom(new BMap.Point(121.220598, 31.293589), 18);
                        }
                    });
                }

                function clearOverlays(){
                    map.clearOverlays()
                }
            </script>
        </div>

        <div class="form-group">
            {{ form.complement.label }}
            {{ form.complement }}
        </div>
        <br />
        <div class="form-group m-0">
            <button type="submit" class="btn btn-info btn-lg btn-block" role="'button">
                Submit
            </button>
        </div>
        <br>
<!--            <a href="#" class="btn btn-info btn-lg btn-block" role="button">Submit</a>-->
        <button type="button" id="ClearAll" class="btn btn-info btn-lg btn-block">
            Clear All
        </button>
        <br>
        <br>
    </form>
    </div>
</body>

<script>
	$(document).ready(function () {
		$(".w100").css("width", "100%");
		$(".aside").css("left", "-230px");
		$(".keybtn").find('.fa').attr('class', "fa fa-chevron-right");

		var onoff = true;
		$(".keybtn").click(function () {
			if (onoff) {
				onoff = !onoff
				$(".aside").animate({ left: '0px' });
				$(this).find('.fa').attr('class', "fa fa-chevron-left");
				$(".w100").css("width", "calc(100vw - 230px)");
			} else {
				onoff = !onoff
				$(".aside").animate({ left: '-230px' });
				$(this).find('.fa').attr('class', "fa fa-chevron-right");
				$(".w100").css("width", "100vw");
			}
		});
		$(".ic1").hover(function () {
			$(this).find(".subMenu").css("display", "block");
		}, function () {
			$(this).find(".subMenu").css("display", "none");
		});
	});
	$('#ClearAll').click(function () {
        map.clearOverlays();
        $("#foundLocation").val("");
        count.length = 0;
    })
</script>

</html>